<template>
	<w-dailog
		v-model="dialogVisible"
		width="800px"
		:title="title"
		:showMoreBtn="false"
		heightFullscreen
	>
  <div class="organ-manage-container">
    <pdf :src="src" v-for="item in numPages" :key="item" :page="item"></pdf>
	</div>
  <template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
      <fx-button type="save" @click="exportPDF">导出</fx-button>
		</template>
	</w-dailog>
</template>
<script>
import pdf from 'vue-pdf'
import axios from 'axios'
export default {
	name: 'pdfContainer',
	components: {
		pdf
	},
	props: {
		pdfSrc: String,
		pdfUrl: String
	},
	data () {
		return {
			dialogVisible: false,
			title: '',
			numPages: '',
			src: ''
		}
	},
	methods: {
		open (routeID, materialName) {
			this.title = materialName + 'SOP详情'
			this.$nextTick(() => {
				this.loadPDF()
			})
		},
		loadPDF () {
			const perfix64 = 'data:application/pdf;base64,' + this.pdfSrc
			// const CMAP_URL = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/'
			const CMAP_URL = '/common/cmaps/'
			this.src = pdf.createLoadingTask({
				url: perfix64,
				cMapUrl: CMAP_URL,
				cMapPacked: true
			})
			this.src.promise.then(pdf => {
				this.numPages = pdf.numPages
				console.log(pdf.numPages)
				this.dialogVisible = true
			}).catch(err => {
				console.error('pdf 加载失败', err)
			})
		},
		getsop (routingId) {
			axios({
				method: 'get',
				url: 'schedule/stationTaskDetail/export/exportSopPdfByRoutingId?routingId=' + routingId,
				headers: {
					'Content-Type': 'application/pdf'
				}
			}).then((res) => {
				const blob = new Blob([res.data.data.byte]) // Blob 对象表示一个不可变、原始数据的类文件对象
				const fileReader = new FileReader() // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
				fileReader.readAsDataURL(blob)
				// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
				fileReader.onload = (e) => {
					this.src = URL.createObjectURL(blob)
				}
				const url = URL.createObjectURL(blob)
				// this.src = 'http://image.cache.timepack.cn/nodejs.pdf'
				this.src = url
			}).catch(err => {
				console.log(err)
			})
		},
		exportPDF () {
			const perfix64 = 'data:application/pdf;base64,' + this.pdfSrc
			const a = document.createElement('a')
			a.download = this.title + '.pdf'
			a.style.display = 'none'
			a.href = perfix64
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		},
		onCancelClick () {
			this.dialogVisible = false
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.organ-manage-container {
	flex: 1;
	display:flex
	flex-direction: column
	overflow: auto
	.tools-left, .tools-right {
		display:flex
		flex-direction: row
		align-items: center
	}
	.tools-left {
		flex: 1
	}
}
</style>
